.g-container {
  margin: auto;
}

.btn-a,
.btn-b {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 40px;
}

.btn-a {
  background: red;
  anchor-name: --yasuo;
}

.btn-a:hover ~ .anchor {
  position-anchor: --yasuo;
  left: anchor(--yasuo center);
  top: anchor(--yasuo bottom);
  transform: translate(-50%, 5px);
  display: block;
}

.btn-b {
  background: green;
  anchor-name: --gailun;
}

.btn-b:hover ~ .anchor {
  position-anchor: --gailun;
  left: anchor(--gailun center);
  top: anchor(--gailun bottom);
  transform: translate(-50%, 5px);
  display: block;
}

.anchor {
  background: gray;
  width: 120px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  transition: all 0.5s linear;
}

ul {
  position: relative;
  width: 700px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  resize: horizontal;
  overflow: hidden;
  list-style: none;
}
ul li {
  flex-grow: 1;
  height: 100px;
  cursor: pointer;
  color: #000;
  font-size: 48px;
  line-height: 100px;
  text-align: center;
}
ul::before {
  position: absolute;
  content: "";
  height: 5px;
  background: transparent;
  bottom: 0;
  left: anchor(var(--target) left);
  right: anchor(var(--target) right);
  transition: 0.3s all;
  transform: scaleX(5);
}

ul:hover::before {
  background: #000;
  transform: scaleX(1);
}

ul:has(li:nth-child(1):hover) {
  --target: --anchor-1;
}

li:nth-child(1) {
  anchor-name: --anchor-1;
}

ul:has(li:nth-child(2):hover) {
  --target: --anchor-2;
}

li:nth-child(2) {
  anchor-name: --anchor-2;
}

ul:has(li:nth-child(3):hover) {
  --target: --anchor-3;
}

li:nth-child(3) {
  anchor-name: --anchor-3;
}

ul:has(li:nth-child(4):hover) {
  --target: --anchor-4;
}

li:nth-child(4) {
  anchor-name: --anchor-4;
}

ul:has(li:nth-child(5):hover) {
  --target: --anchor-5;
}

li:nth-child(5) {
  anchor-name: --anchor-5;
}

ul:has(li:nth-child(6):hover) {
  --target: --anchor-6;
}

li:nth-child(6) {
  anchor-name: --anchor-6;
}

ul:has(li:nth-child(7):hover) {
  --target: --anchor-7;
}

li:nth-child(7) {
  anchor-name: --anchor-7;
}

.text-wrap {
  position: relative;
}
.text-wrap span {
  color: deeppink;
}
.text-wrap::before, .text-wrap::after {
  position: absolute;
  transition: 0;
  opacity: 0;
}
.text-wrap::before {
  content: "";
  top: calc(anchor(var(--target) top) + 10px);
  left: calc(anchor(var(--target) left) + 5px);
  border: 8px solid transparent;
  border-bottom: 8px solid #000;
}
.text-wrap::after {
  content: "Alert Tips!";
  width: 80px;
  padding: 2px 4px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #000;
  top: calc(anchor(var(--target) top) + 24px);
  left: anchor(var(--target) left);
  right: anchor(var(--target) right);
}

p:has(span:hover)::before,
p:has(span:hover)::after {
  opacity: 1;
}

p:has(span:nth-child(1):hover) {
  --target: --anchor-1;
}

p span:nth-child(1) {
  anchor-name: --anchor-1;
}

p:has(span:nth-child(2):hover) {
  --target: --anchor-2;
}

p span:nth-child(2) {
  anchor-name: --anchor-2;
}

p:has(span:nth-child(3):hover) {
  --target: --anchor-3;
}

p span:nth-child(3) {
  anchor-name: --anchor-3;
}

p:has(span:nth-child(4):hover) {
  --target: --anchor-4;
}

p span:nth-child(4) {
  anchor-name: --anchor-4;
}

p:has(span:nth-child(5):hover) {
  --target: --anchor-5;
}

p span:nth-child(5) {
  anchor-name: --anchor-5;
}

p:has(span:nth-child(6):hover) {
  --target: --anchor-6;
}

p span:nth-child(6) {
  anchor-name: --anchor-6;
}

p:has(span:nth-child(7):hover) {
  --target: --anchor-7;
}

p span:nth-child(7) {
  anchor-name: --anchor-7;
}

p:has(span:nth-child(8):hover) {
  --target: --anchor-8;
}

p span:nth-child(8) {
  anchor-name: --anchor-8;
}

p:has(span:nth-child(9):hover) {
  --target: --anchor-9;
}

p span:nth-child(9) {
  anchor-name: --anchor-9;
}

@position-try --position-bottom {
  left: anchor(--btn center);
  bottom: anchor(--btn top);
  top: unset;
  margin-bottom: 10px;
}
.position-try-fallbacks {
  padding: 100px 0;
}
.position-try-fallbacks .btn {
  anchor-name: --btn;
  border: 1px dashed #000;
  background: #ddd;
  width: 130px;
  height: 40px;
  margin: auto;
}
.position-try-fallbacks .popover {
  position: absolute;
  position-anchor: --btn;
  left: anchor(--btn center);
  top: anchor(--btn bottom);
  transform: translate(-50%, 5px);
  background: pink;
  color: white;
  position-try-fallbacks: --position-bottom;
}/*# sourceMappingURL=02-anchor.css.map */